<template>
	<view class="content">

		<view class="">
			<view class="degree">
				<view class="degree-item" :class="{ active: activeIndex === index }" v-for="(item, index) in degreeList"
					:key="index" @click="handleDegreeClick(index)">
					<span>{{ item.name }}</span>
					<span class="number">{{ item.number }}</span>
				</view>
			</view>
			<view class="evaluate">
				<view class="evaluate-item" v-for="item in 10">
					<view class="evaluate-left">
						<view class="evaluate-user">
							<view class="user-img">
								<image src="../../../static/test/test_1.png" mode="widthFix"></image>
							</view>
							<view class="">
								<view class="size-14 color-666">昵称</view>
								<view class="size-12 color-999 p-t-2">1天前</view>
							</view>
						</view>
						<view class="comment size-12 color-666">
							她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都我都她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都我都她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都
						</view>
					</view>
					<view class="evaluate-right">
						<view class="evaluate-imgItem" v-for="item in 4">
							<image src="../../../static/test/test_1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				degreeList: [{
						name: "全部",
						number: 300
					}, {
						name: "好评",
						number: 80
					},
					{
						name: "中评",
						number: 120
					},
					{
						name: "差评",
						number: 50
					},
					{
						name: "追评",
						number: 50
					}
				]

			};
		},
		methods: {
			handleDegreeClick(index) {
				this.activeIndex = index;
			}
		}
	}
</script>

<style lang="less">
	.degree {
		padding: 30rpx;

		.degree-item {
			background-color: #fff;
			padding: 16rpx 26rpx;
			margin: 10rpx;
			color: #333;
			font-size: 12px;
			border-radius: 10rpx;
			display: inline-block;
			border: 1px solid transparent;
			transition: all 0.3s ease;

			.number {
				color: #999;
				margin-left: 2rpx;
			}

			&.active {
				border-color: #daa03d;
				color: #daa03d;

				.number {
					color: inherit;
				}
			}
		}
	}

	.evaluate {
		// padding: 30rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.evaluate-item {
			width: 100%;
			margin-bottom: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 0 0 30rpx 30rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

			.evaluate-left {
				width: 100%;
				height: auto;

				.evaluate-user {
					display: flex;
					gap: 20rpx;
					align-items: center;

					.user-img {
						width: 70rpx;

						image {
							width: 100%;
							border-radius: 50%;
						}
					}


				}

				.comment {
					line-height: 1.5;
					margin: 20rpx 0rpx;
				}
			}

			.evaluate-right {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 8rpx;

				.evaluate-imgItem {
					margin-top: 20rpx;
					width: 24%;

					image {
						width: 100%;
					}
				}

			}

		}
	}
</style>